<template>
    <div class="text-item">
        <h2 class="el-down-line">
            <span
                v-for="(v, index) in banner.title"
                :key="index"
                :style="`animation-delay: ${(index + 1) * 0.2}s;`"
            >
                {{ v }}
            </span>
        </h2>
        <AnimateTextFlash :list="banner.text" />
    </div>
</template>

<script>
export default {
    name:'link-banner',
    data() {
        return {
            banner: {
                title: ["友", "情", "链", "接"],
                text: [
                    "这",
                    "是",
                    "一",
                    "班",
                    "充",
                    "满激",
                    "情",
                    "的",
                    "小",
                    "伙",
                    "伴",
                ],
            },
        };
    },
};
</script>

<style lang="less" scoped>
.text-item {
    width: 100%;

    .text-flash {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
    }
}
</style>

